<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="author" content="Reddy.Huang, i@0u0b.com" />
    <base href="http://cool.miaov.com/170309/card/">
    <title>妙味课堂-JS中级课程小组练习-卡牌</title>
    <link rel="stylesheet" href="./src/css/reset.css">
    <link rel="stylesheet" href="./src/css/main.css">
    <link rel="stylesheet" href="./src/css/font-awesome.min.css">
</head>

<body>
    <div class="background">
        <img src="./src/img/common/main-bg.jpg" alt="bg-normal" style="display: none;">
        <img src="./src/img/common/background_night.png" alt="bg-gacha" style="display: none;">
        <img src="./src/img/common/game1.jpg" alt="bg-game1" style="display: none;">
        <canvas id="dot" class="showIn" style="background:linear-gradient(to bottom, #9cc2c9, #8468b8);">
            <p>your browser not support canvas</p>
        </canvas>
    </div>
    <div class="loader">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <p>加载中</p>
    </div>
    <nav>
        <ul class="main-nav">
            <li class="active"><a href="javascript:;"><i class="fa fa-home"></i>首页</a></li>
            <li><a href="javascript:;"><i class="fa fa-rocket"></i>卡牌展开折叠效果</a></li>
            <li><a href="javascript:;"><i class="fa fa-support"></i>模拟抽卡</a></li>
            <li><a href="javascript:;"><i class="fa fa-gamepad"></i>简易卡牌对战游戏</a></li>
            <li><a href="javascript:;"><i class="fa fa-gamepad"></i>翻转消除游戏</a></li>
        </ul>
    </nav>
    <a href="javascript:;" id="return-main-nav"><i class="fa fa-arrow-left"></i></a>
    <section id="section0">
        <div class="title-wrapper">
            <h1>卡牌动效展示页</h1>
        </div>
    </section>
    <section id="section1">
        <div id="click-navigation">
            <span class="right" onclick="cm.transform2d(cm.right)">right</span>
            <span class="left" onclick="cm.transform2d(cm.left)">left</span>
            <span class="horizontal" onclick="cm.transform2d(cm.horizontalSpread)">horizontalSpread</span>
            <span class="rspread" onclick="cm.transform2d(cm.rightSpread)">rightSpread</span>
            <span class="lspread" onclick="cm.transform2d(cm.leftSpread)">leftSpread</span>
            <span class="rotate2" onclick="cm.transform2d(cm.rotate330)">rotate330</span>
            <span class="rotate" onclick="cm.transform2d(cm.rotate360)">rotate360</span>
            <span class="next" onclick="cm.prevCard()"><</span>
            <span class="prev" onclick="cm.nextCard()">></span>
            <input type="text" name="" class="addNum" value="" placeholder="添加卡牌的张数" />
            <input type="button" name="" class="btn" value="添加" />
        </div>
        <ul id="card-container">
            <li class="cards" v-for="card in list" @mousedown.prevent @click="spread">
                <em></em>
                <img :src="card.img" alt="">
                <div class="info">
                    <h4>{{ card.name }}</h4>
                    <p></p>
                </div>
            </li>
        </ul>
    </section>
    <section id="section2">
        <div class="gacha-bg">
            <ul class="bling">
                <li class="bling-1"></li>
                <li class="bling-2"></li>
            </ul>
            <ul class="effect">
                <li class="effect-1"></li>
                <li class="effect-2"></li>
            </ul>
        </div>
        <div class="gacha-ft">
            <div class="touch">
                <div class="book"></div>
                <img src="./src/img/gacha/click.png" alt="">
                <img src="./src/img/gacha/arrow.png" alt="">
            </div>
            <ul id="s2">
                <li class="wrapper cards" :class="{
                            neww: card.isNew,
                            dead: card.isDead,
                            r: card.rarity.r,
                            sr: card.rarity.sr,
                            ssr: card.rarity.ssr
                    }" v-for="card in list">
                    <em></em>
                    <img :src="card.img" alt="">
                    <div class="info">
                        <h4>{{ card.name }}</h4>
                        <p>{{ card.des }}</p>
                    </div>
                    <div class="property">
                        <i class="attack">{{ card.attack }}</i>
                        <i class="defense"><span>{{ card.defense }}</span></i>
                    </div>
                    <div class="shadow"></div>
                </li>
            </ul>
        </div>
    </section>
    <section id="game-table-0">
        <div class="attacker-wrapper">
            <ul class="attacker">
                <li class="cards" :class="{
                            neww: card.isNew,
                            dead: card.isDead,
                            r: card.rarity.r,
                            sr: card.rarity.sr,
                            ssr: card.rarity.ssr
                    }" v-for="card in aList">
                    <em></em>
                    <img :src="card.img" alt="">
                    <div class="info">
                        <h4>{{ card.name }}</h4>
                    </div>
                    <div class="property">
                        <i class="attack">{{ card.attack }}</i>
                        <i class="defense"><span>{{ card.health }}</span></i>
                    </div>
                </li>
            </ul>
        </div>
        <div class="defender-wrapper">
            <ul class="defender">
                <li class="cards" :class="{
                            neww: card.isNew,
                            dead: card.isDead,
                            r: card.rarity.r,
                            sr: card.rarity.sr,
                            ssr: card.rarity.ssr
                    }" v-for="card in dList">
                    <em></em>
                    <img :src="card.img" alt="">
                    <div class="info">
                        <h4>{{ card.name }}</h4>
                    </div>
                    <div class="property">
                        <i class="attack">{{ card.attack }}</i>
                        <i class="defense"><span>{{ card.health }}</span></i>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="notice">
        </ul>
    </section>
    <section id="game-table-1">
        <ul id="gt"></ul>
    </section>
    <div class="dialog-bg"></div>
    <div class="dialog">
        <div class="img"></div>
        <p class="title">关于本项目</p>
        <div class="desc">
            <p style="font-size: 18px">参考开源项目：</p>
            <p><a href="https://github.com/supperjet/Dot">supperjet/Dot</a></p>
            <p><a href="https://github.com/Kagami-src/MerusutoChristina">Kagami-src/MerusutoChristina</a></p>
            <p style="font-size: 18px; margin-top: 10px">非商业使用素材：</p>
            <p><a href="http://mlk.qijee.com/">梅露可物语</a></p>
            <p><a href="http://www.beva.com/">贝拉卡片翻翻看</a></p>
        </div>
        <div class="btns">
            <input type="button" class="btn1" value="确定" />
        </div>
    </div>
    <script src="./build/js/vue.min.js"></script>
    <script src="./build/js/polyfill.js"></script>
    <script src="./src/js/cardsData.js"></script>
    <script src="./build/js/tool.js"></script>
    <script src="./build/js/card.js"></script>
</body>

</html>